<template>
	<view style="height: 90vh;">
		<view style="background-color: white;padding: 37px 30px 20px 30px;display: flex;flex-direction: row;">
			
			<view style="width: 60px;height: 60px;">
				<view class="myAvatar"  :style="{backgroundImage: 'url(' + myInfo.userAvatar + ')'}">
				</view>
			</view>
			
			<view style="width: 15px;"></view>	
				
			<view style="width: 150px;">
				<view>
					<view class="userName">{{myInfo.userName}}</view>
					<view style="font-weight: 300;font-size: 14px">账号：{{myInfo.userAccount}}</view>
				</view>
			</view>
			
			<view style="margin: 10px 0 0 100px;font-size: 25px;color: darkgray;" @click="toMyinfo">></view>
		</view>
		<u-line margin="15px 0 0 0"></u-line>
		<view style="padding: 15px 35px 0 30px;">
			<u-row>
				<u-col :span="1">
					<image src="../../../static/score.png" style="width: 20px;height: 20px;"></image>
				</u-col>
				<u-col :span="10">
					我的得分
				</u-col>
				<u-col :span="1">
					<view style="float: right;margin-left: 10px;">
						{{myInfo.score == '' ? 0 : myInfo.score}}
					</view>
				</u-col>
			</u-row>
		</view>
		<u-line margin="15px 0 0 0"></u-line>
		<view style="padding: 15px 35px 0 30px;">
			<u-row>
				<u-col :span="1">
					<image src="../../../static/timeActivity.png" style="width: 20px;height: 20px;"></image>
				</u-col>
				<u-col :span="10">
					志愿时长
				</u-col>
				<u-col :span="1">
					<view style="float: right;margin-left: 10px;">
							{{myInfo.times == '' ? 0 : myInfo.times}}h
					</view>
				</u-col>
			</u-row>
		</view>
		<u-line margin="15px 0"></u-line>
		<view style="padding: 0px 22px 0 30px;">
			<u-row>
				<u-col :span="1">
					<image src="../../../static/myActivity.png" style="width: 20px;height: 20px;"></image>
				</u-col>
				<u-col :span="10">
					我的活动
				</u-col>
				<u-col :span="1">
					<view style="float: right;">
						<view style="font-size: 22px;color: darkgray;" @click="toMyActivity">></view>
						</view>
				</u-col>
			</u-row>
			
		</view>
		<u-line margin="15px 0"></u-line>
		<view style="padding: 0px 22px 0 30px;">
			<u-row>
				<u-col :span="1">
					<image src="../../../static/Myteam.png" style="width: 20px;height: 20px;"></image>
				</u-col>
				<u-col :span="10">
					我的团队
				</u-col>
				<u-col :span="1">
					<view style="float: right;">
						<view style="font-size: 23px;color: darkgray;" @click="toMyTeam">></view>
						</view>
				</u-col>
			</u-row>
			
		</view>
		<u-line margin="15px 0"></u-line>
		<view style="padding: 0px 22px 0 30px;">
			<u-row>
				<u-col :span="1">
					<image src="../../../static/mySeting.png" style="width: 20px;height: 20px;"></image>
				</u-col>
				<u-col :span="10">
					账户设置
				</u-col>
				<u-col :span="1">
					<view style="float: right;">
						<view style="font-size: 23px;color: darkgray;" @click="toMySetting">></view>
						</view>
				</u-col>
			</u-row>
			
		</view>
		<u-line margin="15px 0"></u-line>
		
		
		
		
		<tab-bar :currentPage="4"></tab-bar>
	</view>
</template>

<script>
import { getUserByIdApi } from '../../../utils/user'
	export default {
		data() {
			return {
				myInfo: {}
			}
		},
		methods: {
			toMyinfo(){
				let id = this.myInfo.id
				uni.navigateTo({
					url:`/pages/view/personal/myInfo?id=${id}`
				})
			},
			toMyActivity(){
				let id = this.myInfo.id
				uni.navigateTo({
					url:`/pages/view/personal/myActivity?id=${id}`
				})
			},
			toMyTeam(){
				let id = this.myInfo.id
				uni.navigateTo({
					url:`/pages/view/personal/myTeam?id=${id}`
				})
			},
			toMySetting(){
				let id = this.myInfo.id
				uni.navigateTo({
					url:`/pages/view/personal/mySetting?id=${id}`
				})
			}
		},
		onShow() {
			let id = uni.getStorageSync('userInfo').id
			let that = this
			getUserByIdApi(id).then(res => {
				if(res.code == 0){
					that.myInfo = res.data
				}
			})
		}
	}
</script>

<style scoped>
.myAvatar{
	width: 50px;
	height: 50px;
	border-radius: 7px;
	background-size: 100% 100%;
}
.myItem{
	padding: 12px;
	text-align: center;font-weight: 300;font-size: 14px
}
.userName{
	font-weight: 600;font-size: 17px;margin: 2px 0 7px 0;
	display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
}
</style>
